<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件</title>
</head>
<body>
	<div id="test1">
		<input v-model="message" placeholder="edit me">
		<p>Message is: {{ message }}</p>
	</div>
	<hr>

	<div id="test2">
		<p>contant is:</p>
		<p style="white-space: pre">{{message}}</p>
		<textarea name="test" id="" cols="30" rows="10" v-model="message"></textarea>
	</div>

	<div id="test3">
		<input type="checkbox" id="checkbox" v-model="checked">
		<label for="checkbox">{{checked}}</label>
	</div>

	<hr>

	<div id="test4">
		<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
		<label for="jack">Jack</label>

		<input type="checkbox" id="rose" value="Rose" v-model="checkedNames">
		<label for="rose">Rose</label>

		<input type="checkbox" id="david" value="Daivd" v-model="checkedNames">
		<label for="david">Daivd</label>

		<p>Checked names: {{ checkedNames }}</p>
	</div>
	
	<hr>

	<div id="test5">
		<input type="radio" id="one" value="One" v-model="picked">
		<label for="one">One</label>
		<input type="radio" id="two" value="Two" v-model="picked">
		<label for="two">Two</label>
		<input type="radio" id="three" value="Three" v-model="picked">
		<label for="three">Three</label>
		<p>Pick:{{picked}}</p>
	</div>

	<div id="test6">
		<select v-model="selected">
			<option>A</option>
			<option>B</option>
			<option>C</option>
		</select>
		<span>Select: {{selected}}</span>
	</div>
	
	<hr>

	<div id="test7">
		<select v-model="selected">
			<option v-for="item in items" :value="item.value">{{item.text}}</option>
		</select>
		<span>Select: {{selected}}</span>
	</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
	var test1 = new Vue ({
		el:'#test1',
		data: {
			message: ''
		}
	});

	var test2 = new Vue ({
		el:'#test2',
		data: {
			message: ''
		}
	});

	var test3 = new Vue ({
		el:'#test3',
		data: {
			checked:true
		}
	});

	var test4 = new Vue ({
		el:'#test4',
		data: {
			checkedNames: [],
		}
	});

	var test5 = new Vue({
		el:'#test5',
		data: {
			picked:''
		}
	});

	var test6 = new Vue ({
		el:'#test6',
		data: {
			selected:'A'
		}
	});

	var test7 = new Vue ({
		el:'#test7',
		data: {
			selected:'',
			items: [{
				value:'A',
				text:'One'
			},{
				value:'B',
				text:'Two'
			},{
				value:'C',
				text:'three'
			}]
		}
	});
</script>
</html>